<template>
	<view class="template-mine tn-safe-area-inset-bottom">
		<tn-nav-bar fixed :bottomShadow="false">我的主页</tn-nav-bar>
		<view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
			<swiper class="card-swiper " :circular="true" :autoplay="true" duration="500" interval="5000"
				@change="cardSwiper">
				<swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
					<view class="swiper-item image-banner" @click="kantu(index,swiperList)">
						<image :src="item" mode="aspectFill"></image>
						<view @click.stop="touxiang=true" class="" style="position: absolute;top:50rpx;right: 50rpx;"
							v-if="index==0">
							<tn-tag shape="circle" backgroundColor="tn-cool-bg-color-6" width="180rpx"
								height="50rpx">
								设置封面头像
							</tn-tag>
						</view>
					</view>




				</swiper-item>
			</swiper>
		<view style="width: 150px;height: 150px; 
				   justify-content: space-between;
    padding: 0 15px;
    display: flex;
    position: fixed;
    z-index: 120;
    top:150rpx;
	left: 10px;" v-if="body.chongwu">
					<image v-model="showchongwu" :src="body.chongwu" style="height: 100px;" mode="heightFix"></image> 
				</view>
		</view>
		<view class="indication">
			<block v-for="(item,index) in swiperList" :key="index">
				<view class="spot" :class="cardCur==index?'active':''"></view>
			</block>
		</view>

		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 0;">
			<view class=" tantan-slide-box-info ">

				<view class="tn-flex tn-flex-row-between">
					<view class="title justify-content-item">{{body.nickname}}
						<text class="tn-icon-trophy-fill"
							style="color:rgb(85 170 0 /0.6);font-size:40rpx;margin:0 18rpx;"></text>
						<tn-tag v-if="body.is_renzheng" shape="circle" backgroundColor="tn-cool-bg-color-4"
							height="38rpx" width="120rpx">
							<text class="tn-icon-safe" style="font-size:24rpx;">已认证</text>
						</tn-tag>
					</view>
					<view class=" ">
						<tn-tag @click="navigateToFn({ url: '/mineMixinPages/set', checkLogin: true })" shape="circle"
							backgroundColor="tn-cool-bg-color-6"  height="34rpx" width="120rpx">
							编辑资料
						</tn-tag>
					</view>
				</view>

			<view class="desc">
						<tn-tag v-if="body.online" shape="circle" backgroundColor="#ebebeb" fontColor="#3eaa6f"
							height="34rpx" width="80rpx">
							在线
						</tn-tag>
						<text v-if="body.new_city">现居{{body.new_city}}</text>
						<text v-else>现居:未填写</text>
						<text v-if="body.old_city"> • {{body.old_city}}人</text>
							<text v-else> • 籍贯:未填写</text>	
					</view>
			
					<view class="tags">
								<text v-if="body.hun">{{body.hun}} • </text>
						<text v-if="body.shengri.age">
							{{body.shengri.age}}，{{body.shengri.animals}}，{{body.shengri.constellation}}
						</text>
						<text v-else>年龄未填写</text>	
						<text v-if="body.tizhong">
							，{{body.tizhong}}Kg
						</text>
						<text v-if="body.shengao">
							，{{body.shengao}}cm
						</text>
						<text v-if="body.zhiye">
							，{{body.zhiye}}
						</text>
					</view>
					<view class="tags" >
						<text v-if="body.car">{{body.car}} • </text>
						<text v-if="body.home">{{body.home}}  •</text>
						<text v-if="body.xueli">{{body.xueli}} </text>
						<text v-if="body.xuexiao">	• {{body.xuexiao}} </text>
					
					<tn-tag v-if="body.is_school" shape="circle" backgroundColor="tn-main-gradient-cyan--light"
								height="38rpx" width="120rpx" margin="0 5px">
								<text  style="font-size:24rpx;">已认证</text>
							</tn-tag></view>
					<view class="tags">{{body.zhiwei}}
					<tn-tag v-if="body.is_work" shape="circle" backgroundColor="tn-main-gradient-cyan--light"
								height="38rpx" width="120rpx" margin="0 5px">
								<text  style="font-size:24rpx;">已认证</text>
							</tn-tag>
					</view>
			
				</view>
			</view>

		<view @click="navigateToFn({ url: '/mineMixinPages/renzheng', checkLogin: true })" class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;" v-if="configInfo.is_renzheng||configInfo.is_xueli||configInfo.is_work">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">身份认证</view>
				<view class=" ">
				<!-- 	<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="#60c100" height="36rpx" width="300rpx">
						<text class="tn-icon-safe-fill" style="font-size:34rpx;">认证</text>
					</tn-tag> -->
				</view>
			</view>

			<view class="tn-flex tn-flex-row-center tn-radius  tn-bg-white" v-if="configInfo.is_renzheng">
				<view class="tn-padding-sm tn-margin-sm  tn-radius">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view style="width:100rpx;
			height: 100rpx;
			font-size: 30px;
			border-radius: 50%;
			margin-bottom: 9px;
			position: relative;
			background-color: #f3f8ff;
			z-index: 1;" class=" tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<view class="tn-icon-identity-fill" style="color:rgb(116, 202, 255);font-size:60rpx;">
							</view>
						</view>
						<text class="tn-icon-success-circle-fill" style="font-size: 36rpx;"
							:class="body.sfz_name?'tn-color-red':''"></text>
						<view class="tn-text-center tn-margin-top-sm">
							<text class="tn-text-ellipsis" v-if="body.sfz_name">实名已认证</text>
							<text class="tn-text-ellipsis" v-else>实名未认证</text>
						</view>
					</view>
				</view>
				<view class="tn-padding-sm tn-margin-sm  tn-radius" v-if="configInfo.is_work">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view style="width:100rpx;
    height: 100rpx;
    font-size: 30px;
    border-radius: 50%;
    margin-bottom: 9px;
    position: relative;
	background-color: #fff7e9;
    z-index: 1;" class=" tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<view class="tn-icon-shop-fill" style="color:rgb(255, 153, 28);font-size:60rpx;"></view>

						</view>
						<text class="tn-icon-success-circle-fill" style="font-size: 36rpx;"
							:class="body.is_work?'tn-color-red':''"></text>
						<view class="tn-text-center tn-margin-top-sm">
							<text class="tn-text-ellipsis" v-if="body.is_work">工作已认证</text>
							<text class="tn-text-ellipsis" v-else>工作未认证</text>
						</view>
					</view>
				</view>
				<view class="tn-padding-sm tn-margin-sm  tn-radius " v-if="configInfo.is_xueli">
					<view class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
						<view style="width:100rpx;
			height: 100rpx;
			font-size: 30px;
			border-radius: 50%;
			margin-bottom: 9px;
			position: relative;
			background-color: #eefff1;
			z-index: 1;" class=" tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur">
							<view class="tn-icon-ticket-fill" style="color:rgb(150, 199, 97);font-size:60rpx;"></view>

						</view>
						<text class="tn-icon-success-circle-fill" :class="body.is_school?'tn-color-red':''"
							style="font-size: 36rpx;"></text>
						<view class="tn-text-center tn-margin-top-sm">
							<text class="tn-text-ellipsis" v-if="body.is_school">学历已认证</text>
							<text class="tn-text-ellipsis" v-else>学历未认证</text>
						</view>
					</view>
				</view>
			</view>


		</view>


		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg" >我的相册
					<text class="tn-text-sm tn-color-gray tn-margin-left-sm">(({{images.length}}/6))</text>
				</view>
				<view class=" ">
					<tn-tag @click="bontenimg()" shape="circle"
						backgroundColor="tn-cool-bg-color-6"  height="34rpx" width="120rpx">
						上传照片
					</tn-tag>
				</view>
			</view>
			
			<tn-scroll-list :indicatorWidth="100" :indicatorBarWidth="30" indicatorColor="#FFE2D9" indicatorActiveColor="#FF7043">
				
			
				<!-- 方式12 start-->
			<view class="tn-flex tn-margin-top-sm" v-for="(item, indexgift) in fileList" :key="indexgift">
			  <view class="tn-flex-1  tn-margin-xs tn-radius" >
			    <view style="position: relative;" class="tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center">
			  
			      <view class=" tn-text-center" @click="datu(item.url,indexgift)">
			       <image :src="item.url" style="height:350rpx;" mode="heightFix"></image>
			      </view>
				  <tn-badge @click="del(item.url,indexgift)"  backgroundColor="#ff0000" top="10px" right="10px"  fontColor="#FFFFFF" :absolute="true" >
				    <text>x</text>
				  </tn-badge>
			    </view>
			  </view>
			
			</view>
			  </tn-scroll-list>
		
			
		</view>


		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;">
			<view class="tn-flex tn-flex-row-between"
				@click="navigateToFn({ url: '/mineMixinPages/my_star', checkLogin: true })">
				<view class="justify-content-item tn-text-lg">
					个人动态<text class="tn-text-sm tn-color-gray tn-margin-left-sm"></text>
				</view>
				<view class=" tn-color-gray">
					全部动态 <text class="tn-icon-right"></text>
				</view>
			</view>

			<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top tn-bg-white">
				<tn-button @click="navigateToFn({ url: '/circleMixinPages/edit', checkLogin: true })" shape="round"
					backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="30rpx 30rpx" width="200rpx" shadow
					fontBold>
					<text class="">发布动态</text>
				</tn-button>
			</view>
			<view class="tn-flex tn-flex-row-center tn-margin-top-sm tn-text-sm tn-color-gray">多发布动态让大家认识你的更多面</view>
		</view>
		<quan-list :list="content" :index="true" v-if="content.length>0"></quan-list>


		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;">
			<view class="tn-flex tn-flex-row-between" v-if="body.home_ziwo">
				<view class="justify-content-item tn-text-lg">
					关于我
				</view>				
			</view>
			<view class="tn-flex tn-flex-row-between tn-margin-top" v-if="body.home_ziwo">
				<view class="justify-content-item ">
					<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
						width="150rpx">
						<text class="tn-margin-right-sm tn-icon-circle-fill ">自我描述</text>
					</tn-tag>
				</view>
				<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=自我表述&type=dec', checkLogin: true })">
					编辑<text class="tn-icon-right"></text>
				</view>
			</view>

			<view class="tn-margin-top tn-color-gray" v-if="body.home_ziwo">			
					{{body.dec}}
			</view>
			<block v-if="body.home_voc">
			<view class="tn-flex tn-flex-row-between tn-margin-top" >
				<view class="justify-content-item ">
					<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
						width="150rpx">
						<text class="tn-margin-right-sm tn-icon-circle-fill">语音介绍</text>
					</tn-tag>
				</view>				
			</view>

			<view class="tn-margin-top" v-if="body.voc">			
				<view class="tn-margin-top">
					<tn-button backgroundColor="#00FFC6" padding="40rpx 0" width="60%" shadow fontBold
						@click="bofang(body.voc)">
						<view class="voice-line-wrap"
							style="--line-height:15px;--line-start-color:royalblue ;--line-end-color:indianred">
							<block v-if="isplay">
								<view class="voice-line one"></view>
								<view class="voice-line two"></view>
								<view class="voice-line three"></view>
								<view class="voice-line four"></view>
								<view class="voice-line five"></view>
								<view class="voice-line six"></view>
								<view class="voice-line seven"></view>
								<view class="voice-line six"></view>
								<view class="voice-line five"></view>
								<view class="voice-line four"></view>
								<view class="voice-line three"></view>
								<view class="voice-line two"></view>
								<view class="voice-line one"></view>
							</block>
							<block v-else>
								<view class="tn-icon-sound"></view>
							</block>
							<text class="tn-color-black" style="margin-left: 15px;">{{body.vocsen}} ''</text>
						</view>
					</tn-button>
				</view>
			</view>



			<view class="tn-margin-top tn-color-gray" >
				<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top tn-bg-white">
					<tn-button @click="voc=true" shape="round"
						backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="30rpx 30rpx"  shadow
						fontBold>
						<text class="tn-icon-voice-fill">录制语音</text>
					</tn-button>
					
				</view>
				<view class="tn-flex tn-flex-row-center tn-margin-top-sm tn-color-gray tn-text-sm">请勿违规透露联系方式，注意保护隐私</view>
			</view>
</block>

	<tn-popup v-model="voc" width="80%" height="40%" mode="bottom" :borderRadius="30" :closeBtn="false"
				:maskCloseable="true" >
				<nb-voice-record ref="luyinUpload" @startRecord="start" @endRecord="end" @cancelRecord="cancel">
				</nb-voice-record>

			</tn-popup>


	<block v-if="body.home_jiating">
		<view class="tn-flex tn-flex-row-between tn-margin-top" >
			<view class="justify-content-item ">
				<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
					width="150rpx">
					<text class="tn-margin-right-sm tn-icon-circle-fill ">家庭背景</text>
				</tn-tag>
			</view>
			<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=家庭背景&type=info_jiating', checkLogin: true })">
				编辑<text class="tn-icon-right"></text>
			</view>
		</view>
		
		<view class="tn-margin-top tn-color-gray" v-if="body.info_jiating">			
				{{body.info_jiating}}
		</view>
		<view class="tn-margin-top tn-color-gray" v-else>
				介绍下父母职业，比如普通家庭、经商家庭、高知家庭，家里几口人等
		</view>
</block>
<block v-if="body.home_aihao">
			<view class="tn-flex tn-flex-row-between tn-margin-top" >
				<view class="justify-content-item ">
					<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
						width="150rpx">
						<text class="tn-margin-right-sm tn-icon-circle-fill ">兴趣爱好</text>
					</tn-tag>
				</view>
				<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=兴趣爱好&type=info_aihao', checkLogin: true })">
					编辑<text class="tn-icon-right"></text>
				</view>
			</view>
			
			<view class="tn-margin-top tn-color-gray" v-if="body.info_aihao">			
					{{body.info_aihao}}
			</view>
			<view class="tn-margin-top tn-color-gray" v-else>
					业余喜欢做什么，比如看什么样的书、喜欢去什么地方、看什么电影
			</view>
</block>
<block v-if="body.home_aiqing">
		<view class="tn-flex tn-flex-row-between tn-margin-top" >
			<view class="justify-content-item ">
				<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
					width="150rpx">
					<text class="tn-margin-right-sm tn-icon-circle-fill ">爱情观</text>
				</tn-tag>
			</view>
			<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=爱情观&type=info_aiqingguan', checkLogin: true })">
				编辑<text class="tn-icon-right"></text>
			</view>
		</view>
		
		<view class="tn-margin-top tn-color-gray" v-if="body.info_aiqingguan">			
				{{body.info_aiqingguan}}
		</view>
		<view class="tn-margin-top tn-color-gray" v-else>
				你期待什么样的爱情，你如何看待爱情
		</view>
		</block>
<block v-if="body.home_ta">
			<view class="tn-flex tn-flex-row-between tn-margin-top" >
				<view class="justify-content-item ">
					<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
						width="150rpx">
						<text class="tn-margin-right-sm tn-icon-circle-fill ">理想的另一半</text>
					</tn-tag>
				</view>
				<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=理想的另一半&type=info_lingyiban', checkLogin: true })">
					编辑<text class="tn-icon-right"></text>
				</view>
			</view>
			
			<view class="tn-margin-top tn-color-gray" v-if="body.info_lingyiban">			
					{{body.info_lingyiban}}
			</view>
			<view class="tn-margin-top tn-color-gray" v-else>
					说出你对另一半的期待
			</view>
				</block>	
<block v-if="body.home_dan">
		<view class="tn-flex tn-flex-row-between tn-margin-top" >
			<view class="justify-content-item ">
				<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
					width="150rpx">
					<text class="tn-margin-right-sm tn-icon-circle-fill ">我为什么单身</text>
				</tn-tag>
			</view>
			<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=我为什么单身&type=info_whysolo', checkLogin: true })">
				编辑<text class="tn-icon-right"></text>
			</view>
		</view>
		
		<view class="tn-margin-top tn-color-gray" v-if="body.info_whysolo">			
				{{body.info_whysolo}}
		</view>
		<view class="tn-margin-top tn-color-gray" v-else>
				说说单身的原因
		</view>
			</block>	
<block v-if="body.home_life">
<view class="tn-flex tn-flex-row-between tn-margin-top" >
			<view class="justify-content-item ">
				<tn-tag shape="circle" backgroundColor="#f4f4f4" fontColor="tn-color-bluepurple" height="40rpx"
					width="150rpx">
					<text class="tn-margin-right-sm tn-icon-circle-fill ">期待的生活状态</text>
				</tn-tag>
			</view>
			<view class="justify-content-item tn-color-gray" @click="navigateToFn({ url: '/mineMixinPages/edit_info?title=期待什么样的生活&type=info_shenghuo', checkLogin: true })">
				编辑<text class="tn-icon-right"></text>
			</view>
		</view>
		
		<view class="tn-margin-top tn-color-gray" v-if="body.info_shenghuo">			
				{{body.info_shenghuo}}
		</view>
		<view class="tn-margin-top tn-color-gray" v-else>
				说出你对理想生活的期许
		</view>
		</block>	

		</view>

		<view class="about-shadow  tn-bg-white tn-margin-sm" style="padding:26rpx 32rpx;">
			<view class="tn-flex tn-flex-row-between">
				<view class="justify-content-item tn-text-lg">
					我的标签
				</view>
			<view class="justify-content-item tn-color-gray" @click="tagsshow=true">
				编辑<text class="tn-icon-right"></text>
			</view>
			</view>

			<view class="tn-flex tn-flex-wrap tn-radius tn-margin-top " >
			<tn-tag size='lg'
					:backgroundColor="item.checked ?  'tn-main-gradient-purple' : 'tn-main-gradient-purple--light '"
					margin="15rpx 15rpx" v-for="(item, index) in body.tagschide" :key="index" class="tag-view"
					@click="labelBtn(item,index)">{{item.name}}</tn-tag>
		</view>
			<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top tn-bg-white" v-if="tagsshow">
					<tn-button @click="tagspass" shape="round"
						backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff" padding="30rpx 30rpx"  shadow
						fontBold>
						<text >保存标签</text>
					</tn-button>
					
				</view>
				<view class="tn-flex tn-flex-row-center tn-margin-top-sm tn-color-gray tn-text-sm">选择合适标签更容易匹配相同兴趣的人</view>
			
		</view>



		<view class='tn-tabbar-height'></view>

		<login-fn :is-show-login="loginBoxFlag" @loginSuccessCallback="refreshFn" @close="closeGlobalLoginFn">
		</login-fn>











		<tn-popup v-model="touxiang" width="80%" height="600rpx" mode="bottom" :borderRadius="30" :closeBtn="false"
			:maskCloseable="true">

			<view class="tn-padding-sm tn-margin-sm ">
				<view class="tn-text-center tn-text-bold ">
					头像审核标准</view>
				<view class="tn-color-gray tn-text-center ">
					上传不真实的照片可能无法通过审核哦！</view>
			
			</view>

			<view class=" tn-flex">
				<view class="tn-flex-1  tn-margin-sm">
					<image :src="calcImageSrc('/shili1.jpg')" style="width:100%;" mode="widthFix"></image>
					<view class="" style="position: relative;bottom:50rpx;left:80%;">
						<text class="tn-icon-success-circle-fill" style="font-size: 36rpx;color: #00aa00;"></text>
					</view>
				</view>
				<view class="tn-flex-1 tn-margin-sm">
					<image :src="calcImageSrc('/shili2.jpg')" style="width:100%;" mode="widthFix"></image>
					<view class="" style="position: relative;bottom:50rpx;left:80%;">
						<text class="tn-icon-close-fill" style="font-size: 36rpx;color: #ff5500;"></text>
					</view>
				</view>
				<view class="tn-flex-1 tn-margin-sm">
					<image :src="calcImageSrc('/shili3.jpg')" style="width:100%;" mode="widthFix"></image>
					<view class="" style="position: relative;bottom:50rpx;left:80%;">
						<text class="tn-icon-close-fill" style="font-size: 36rpx;color: #ff5500;"></text>
					</view>
				</view>

			</view>

			<view class="tn-flex tn-flex-row-center tn-radius tn-margin-top">
				<tn-button @click="chooseImage()" shape="round" backgroundColor="tn-cool-bg-color-6" fontColor="#ffffff"
					padding="40rpx 30rpx" width="260rpx" shadow fontBold>
					上传头像
				</tn-button>

			</view>
		</tn-popup>



		<ksp-cropper v-show="caijianshow" mode="fixed" :width="500" :height="800" :maxWidth="500" :maxHeight="800"
			:url="imageUrl" @cancel="close" @ok="cropperFinish"></ksp-cropper>



	</view>
</template>

<script>
	import {
		host
	} from '@/siteinfo.js'
	const audioContext = uni.createInnerAudioContext()

	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	import MescrollBody from '@/components/mescroll-uni/mescroll-body.vue';
	import MescrollUni from '@/components/mescroll-uni/mescroll-uni.vue';
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
	export default {
		name: 'TemplateGroup',
		mixins: [template_page_mixin, MescrollMixin],
		components: {
			MescrollBody
			
		},
		data() {
			return {
				uppic:false,
				///
				
				voc: false,
				vocurl: "",
				vocscend: 0,
				vocurlpass: "",
				vocurlxuanze: "",
				isplay: false,
				
				///
				tagsshow:false,
				imageUrl: '',
				caijianshow: false,
				touxiang: false,
				renshishow: false,
				tuihuanshow: false,
				images: [],
				cardCur: 0,
				isplay: false,
				morendongtaishow: 0,
				list: ['个人资料', '我的动态'],
				showchongwu: false,
				//、
				//图片上传参数
				action: host + '/chat/user/up_img',
				action_qiniu: host + '/chat/user/up_img_qiniu',
				
				formData: {
					apiType: 'this,ali',
					token: uni.getStorageSync('token'),
					image: null
				},
				fileList: [],
				okpiclist: '', //上传完毕的图片字符逗号隔开
				showUploadList: true,
				customBtn: false,
				autoUpload: true,
				showProgress: true,
				deleteable: true,
				customStyle: false,
				maxCount: 6,
				disabled: false,
				//
				liwusvgashow: false,
				giftimg: '',
				giftianchu: false,
				giftitle: '',
				gifcontent: '',
				//、
				button: [{
						text: '取消',
						backgroundColor: '#c1c1c1',
						fontColor: '#000000'
					},
					{
						text: '立即充值',
						backgroundColor: '#ffff00',
						fontColor: '#000000'
					}
				],
				chongzhiis: false,
				shouhutype: '3',
				shouhuxiu: false,
				isReady: false,
				popshow: false,
				valuetop: false,
				loginBoxFlag: false, // 登录框显示隐藏状态
				id: 0,
				shouhuimg: '/static/keeper.png',
				body: {
					"shengri":[],
					"nickname": '',
					"lv": 0,
					"dec": 0,
					"city": 0,
					"bg_img": '',
					"keeper": [],
					"giftlog": [],
					"tags": [],
					"giftCount": 0,
					"keeperCount": 0,

				},
				content: [],
				swiperList: [],
				////////
				jubao_body: '',
				jubaoshow: false,
				show_poster: false, //显示海报
				path: '', //生成的图片地址				
				posterObj: {
					width: '580rpx',
					height: '928rpx',
					background: '#fff',
					borderRadius: '16rpx',
					views: []
				}, //画板数据
				sharedata: [],



			}
		},
		onLoad(option) {
			let that = this
			if (option.daren_id) {
				uni.setStorageSync('daren_id', option.daren_id)
			}
			uni.$off('setLoginBoxFlag');
			uni.$on('setLoginBoxFlag', loginBoxFlag => {
				that.loginBoxFlag = loginBoxFlag;
			});
			uni.$off('editinfo');
			uni.$on('editinfo', data => {
			this.info()
			});
			if (option.id) {
				this.id = Number(option.id)
			}
			if (option.type) {
				this.touxiang=true
			}
			this.info()
			this.dongtai()
		},

		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.body.nickname + '的个人主页', //分享的名称
				path: '/circleMixinPages/blogger_other?id=' + this.id + '&daren_id=' + uni.getStorageSync('user_id'),
				imageUrl: this.body.avatar
			}
		},
		//分享到朋友圈
		onShareTimeline(res) {
			return {
				title: this.body.nickname + '的个人主页',
				path: '/circleMixinPages/blogger_other?id=' + this.id + '&daren_id=' + uni.getStorageSync('user_id'),
				imageUrl: this.body.avatar
			}
		},

		methods: {
			del(url,index){
				let that = this
				uni.showModal({
					title: '提示',
					content: '确认删除本相片吗?',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {							
						that.fileList.splice(index, 1);						
						that.images.splice(index, 1);						
						let imageList = that.fileList.map(i => i.url).join(',');
						console.log(imageList)
						that.imagespass(imageList)						
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			async dongtai() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/index/getGoodslist',
					data: {
									
					}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
					that.content = [result.data.data.data[0]];
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},
			bofang(vocurl) {
				if (this.isplay) {
					audioContext.stop()
					this.isplay = false
					return
				}
				this.isplay = !this.isplay;
				let that = this
				audioContext.src = vocurl
				audioContext.play()
				audioContext.onPlay(() => {})
				audioContext.onEnded(() => {
					this.isplay = false
				})
				audioContext.onError(() => {
					this.isplay = false
					that.msg('音频文件有误')
				})
			},
			
			chooseImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
						this.caijianshow = true
						this.imageUrl = tempFilePaths
						this.touxiang = false
					}
				})
			},
			
			bontenimg() {
				this.uppic=true
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						const tempFilePaths = res.tempFilePaths[0]
						this.caijianshow = true
						this.imageUrl = tempFilePaths
					
					}
				})
			},
			
			
			
			
			
			
			close() {
				this.uppic=false
				this.caijianshow = false
			},
			// 裁剪完成
			cropperFinish(res) {	
			
				this.caijianshow = false
				uni.showLoading({
					title:'上传中'
				})					
				uni.uploadFile({
					url: this.action_qiniu, //仅为示例，非真实的接口地址
					filePath: res.path,
					name: 'file',
					formData: {
						'token': uni.getStorageSync('token'),
						'user': 'test'
					},
					success: (uploadFileRes) => {					
						let data = JSON.parse(uploadFileRes.data)
						uni.hideLoading()
						if (data.code==0){							
						this.msg(data.msg)		  
						return
						 }
						if (this.uppic){
						this.uppic=false
						this.editpic(data.data.file)	
						}else{
						this.uppic=false	
						this.xiugai('avatar_new', data.data.file)						
						}
						

					}
				});
			},
			//插入最新上传的图片到相册
			editpic(file) {
			let that = this	
					
			
			let imageList = this.images.map(i => i).join(',');	
				if (this.images.length==0){
			imageList=file	
			}else{
			imageList=imageList+','+file		
			}
						
			this.imagespass(imageList)
			},
			
			
			
			async xiugai(name, body) {
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/user/set_passmore?name=' + name + '&body=' + body,
					data: {}
				});
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.caijianshow = false
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							showCancel:false,
							content:'上传成功，请等待审核',
							confirmText: '确定',
							success: function(res) {
								if (res.confirm) {									
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});	 
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}
			},

			listChange(lists, index) {
				// console.log('上传文件列表发生改变', lists, index);
				//this.lists.splice(0, this.lists.length)

			},
			sortlist(lists, type) {
				if (type == 'touchend') {
					for (var k = 0, length = lists.length; k < length; k++) {
						if (lists[k].url != this.images[k]) {
							let imageList = lists.map(i => i.url).join(',');
							this.imagespass(imageList)
							break
						}
					}
				}
			},


			//移除图片触发
			fileRemove(currentIndex, lists, index) {
				let imageList = lists.map(i => i.url).join(',');
				this.imagespass(imageList)
			},
			//上传完毕			
			onUploaded(list, index) {
				

			},

			onsuccess(data, currentIndex, list, index) {
				console.log('文件上传成功', data, currentIndex, list, index);
				if (data.code==0){
				this.msg(data.msg)		  
				return
				 }
				 
				let that = this
				list.forEach(item => {
					if (item.response) {
						this.images.push(item.response.data.file)
					}
				})
				let imageList = this.images.map(i => i).join(',');
				this.imagespass(imageList)
			},
			
			async tagspass(){
				let that = this;
				let ss = ''
				for (let i in this.body.tagschide) {
					if (this.body.tagschide[i].checked) {						
						ss += this.body.tagschide[i].name + '@'
					}				
				}
				ss = ss.slice(0, ss.length - 1);					
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/user/set_passmore',
					data: {
						'body': ss,
						'name': 'tags'
					}
				});
				
				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						this.msg('操作成功')
						this.tagsshow=false
						//this.info()
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} 
			},


			async imagespass(imageList) {			
				let that = this;
				let result = await that.$request({
					loading: 1,
					method: 'post',
					url: '/chat/user/set_passmore',
					data: {
						'body': imageList,
						'name': 'images'
					}
				});

				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						uni.hideLoading()
						this.msg('操作成功')
						this.info()
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},





			kantu(i, tulist) {
				uni.previewImage({
					current: i,
					urls: tulist
				});
			},
			cardSwiper(e) {
				this.cardCur = e.detail.current
			},
			labelBtn(name, index) {
				this.body.tagschide[index].checked = !this.body.tagschide[index].checked
				this.tagsshow=true
			},
		
		

			datu(img) {

				uni.previewImage({
					current: img,
					urls: [img]
				});
			},


			

			huadong(e) {
				console.log(e)
				this.morendongtaishow = e.index
			},
			






			toubuxiugai(ted) {
				this.valuetop = ted
				console.log(ted)
			},
			closedPopup() {
				this.popshow = false
			},

			




			async guanzhu(id) {

				if (!this.isLogin) {
					this.loginBoxFlag = true
					return false;
				}
				let result = await this.flowUser(id)
				this.body.is_follow = result.is_follow
				this.msg(result.msg)


			},

			async info() {
				let that = this;
				let result = await that.$request({
					loading: 0,
					method: 'post',
					url: '/chat/index/GetUserinfo',
					data: {}
				});


				if (result.statusCode == 200) {
					if (result.data.code == 200) {
						that.body = result.data.data;
						that.images = that.body.images


						let imgslist = []
						that.body.images.forEach(item => {
							imgslist.push({
								'url': item
							})
						})
						that.fileList = imgslist
						that.swiperList = result.data.data.swiperList;
						uni.setNavigationBarTitle({
							title: that.body.nickname
						});
						if (that.body.chongwu) {
							that.showchongwu = true
						}
						
					} else {
						uni.showToast({
							icon: 'none',
							title: result.data.msg
						});
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: that.$errorMsg
					});
				}


			},


			fuzhi(wx) {
				uni.setClipboardData({
					data: wx,
					complete() {
						uni.showToast({
							title: "已复制到剪贴板"
						})
					}
				})
			},
			refreshFn() {
				this.info()
			},


		start() {
			console.log('开始录音')
			// 开始录音
		},
		end(event) {
			let that=this
			this.voc = false
			console.log(event)
			this.vocurl = event.tempFilePath			
			this.vocurlxuanze = event.tempFilePath				
			this.vocscend = event.duration
			
			uni.showLoading({
				title:'上传中'
			})
			
			
			uni.uploadFile({
				url: this.action, //仅为示例，非真实的接口地址
				filePath: this.vocurlxuanze,
				name: 'file',
				formData: {
					'token': uni.getStorageSync('token'),
					'user': 'test'
				},
				success: (uploadFileRes) => {
					let data = JSON.parse(uploadFileRes.data)
					uni.hideLoading()
					this.vocurlpass = data.data.file
					console.log('上传完毕',this.vocurlpass)	
					this.postvod()
				}
			});		
			
			// 结束录音并处理得到的录音文件
			// event中，app端仅有tempFilePath字段，微信小程序还有duration和fileSize两个字段
		},
		doPreviewImage(url, index) {		
			uni.previewImage({
				current: index,
				urls: url,
				index
			})
		
		},
		
		cancel() {
			console.log('用户取消录音')
		},
		async postvod(){
			let that = this;
			let result = await that.$request({
					loading:1,
					method: 'post',
					url: '/chat/four/userset_voc',
					data: {
						voc: that.vocurlpass,
						vovnew: that.vocurlpass,
						vocsen: that.vocscend							
					}
				});
				console.log(result)	
				
			if (result.statusCode == 200) {
				if (result.data.code == 200) {
					uni.hideLoading()					
					that.msg('修改成功')											
					that.body.voc=	that.vocurlpass			
					that.body.vocsen=	that.vocsen			
				} else {
					uni.showToast({
						icon: 'none',
						title: result.data.msg
					});
				}
			} else {
				uni.showToast({
					icon: 'none',
					title: that.$errorMsg
				});
			}	
				
		}



		}
	}
</script>

<style lang="scss" scoped>
	.meng {}




	.template-mine {
		max-height: 100vh;
	}

	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
	}

	/* 自定义导航栏内容 start */
	.custom-nav {
		height: 100%;

		&__back {
			margin: auto 5rpx;
			font-size: 40rpx;
			margin-right: 10rpx;
			flex-basis: 5%;
			width: 100rpx;
			position: absolute;
		}
	}

	/* 自定义导航栏内容 end */

	/* 顶部背景图 start */
	.top-backgroup {


		height: 550rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 250rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	/* 标题 start */
	.nav_title {
		-webkit-background-clip: text;
		color: #0E122A;


		&--wrap {
			position: relative;
			display: flex;
			height: 120rpx;
			align-items: center;
			justify-content: center;
			font-weight: bold;

			background-size: cover;
		}
	}

	/* 标题 end */

	/* 用户头像 start */
	.logo-image {
		width: 150rpx;
		height: 150rpx;
		position: relative;
	}

	.logo-pic {
		background-size: cover;
		background-repeat: no-repeat;
		// background-attachment:fixed;
		background-position: top;
		border: 8rpx solid rgba(255, 255, 255, 0.05);
		box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.15);
		border-radius: 50%;
		overflow: hidden;
		// background-color: #FFFFFF;
	}

	/* 页面 start*/
	.about-shadow {
		border-radius: 15rpx;
		box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
	}

	.about {

		&__wrap {
			position: relative;
			z-index: 1;
			margin: 20rpx 30rpx;
			margin-top: -230rpx;
		}
	}

	/* 页面 end*/

	/* 图标容器12 start */
	.tn-three {
		position: absolute;
		top: 50%;
		right: 50%;
		bottom: 50%;
		left: 50%;
		transform: translate(-38rpx, -16rpx) rotateX(30deg) rotateY(20deg) rotateZ(-30deg);
		text-shadow: -1rpx 2rpx 0 #f0f0f0, -2rpx 4rpx 0 #f0f0f0, -10rpx 20rpx 30rpx rgba(0, 0, 0, 0.2);
	}

	.icon20 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 100rpx;
				height: 100rpx;
				font-size: 60rpx;
				border-radius: 50%;
				margin-bottom: 18rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器12 start */
	.icon12 {
		&__item {
			width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 15rpx;
				height: 15rpx;
				font-size: 50rpx;
				border-radius: 50%;
				margin-bottom: 38rpx;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;

				}
			}
		}
	}

	/* 标签内容 start*/
	.tn-tag-content {
		&__item {
			display: inline-block;
			line-height: 45rpx;
			padding: 10rpx 30rpx;
			margin: 20rpx 20rpx 5rpx 0rpx;

			&--prefix {
				padding-right: 10rpx;
			}
		}
	}

	/* 图标容器1 start */
	.icon1 {
		&__item {
			// width: 30%;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx;
			margin: 20rpx 10rpx;
			transform: scale(1);
			transition: transform 0.3s linear;
			transform-origin: center center;

			&--icon {
				width: 40rpx;
				height: 40rpx;
				font-size: 28rpx;
				border-radius: 50%;
				position: relative;
				z-index: 1;

				&::after {
					content: " ";
					position: absolute;
					z-index: -1;
					width: 100%;
					height: 100%;
					left: 0;
					bottom: 0;
					border-radius: inherit;
					opacity: 1;
					transform: scale(1, 1);
					background-size: 100% 100%;
					background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg.png);
				}
			}
		}
	}

	/* 图标容器1 end */

	/* 大嘴鸟*/
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);

	}

	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}

	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}

	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}

	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}

	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}

	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}

	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}

	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}

	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}


	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}


	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}

	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}


	.eye--left {
		left: 10%;
	}

	.eye--right {
		left: 85%;
	}

	.eye--center {
		left: 45%;
		top: 10%;
	}

	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}


	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}

	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}


	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}

	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}


	.input-box {
		width: 100vw;
		min-height: 100upx;
		padding: 0 15px;
		position: fixed;
		z-index: 120;
		bottom: 30rpx;
	}

	.money-area {
		margin-top: 30rpx;
		margin-bottom: 20rpx;

		.item {
			height: 150rpx;
			background: #f5f5f5;
			border-radius: 14rpx;

			.price {
				color: #333;
				margin-bottom: 10rpx;
			}

			text {
				color: #9a9a9a;
			}

			&:nth-child(2) {
				margin-left: 20rpx;
				margin-right: 20rpx;
			}
		}

		.active {
			background: #ffbc49;
			color: #fff;

			.price,
			text {
				color: #fff !important;
			}
		}
	}

	/* 轮播视觉差 start */
	.card-swiper {
		height: 950rpx !important;
	}

	.card-swiper swiper-item {
		width: 750rpx !important;
		left: 0rpx;
		box-sizing: border-box;
		padding: 0rpx 26rpx;
		overflow: initial;
	}

	.card-swiper swiper-item .swiper-item {
		width: 100%;
		display: block;
		height: 100%;
		transform: scale(1);
		transition: all 0.2s ease-in 0s;
		overflow: hidden;
	}

	.card-swiper swiper-item.cur .swiper-item {
		transform: none;
		transition: all 0.2s ease-in 0s;
	}

	.image-banner {
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.image-banner image {
		width: 100%;
		height: 100%;
	}

	/* 轮播指示点 start*/
	.indication {
		z-index: 1;
		width: 100%;
		height: 36rpx;
		position: absolute;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.spot {
		background-color: rgb(122, 109, 230);
		opacity: 0.5;
		width: 10rpx;
		height: 10rpx;
		border-radius: 20rpx;
		top: -60rpx;
		margin: 0 8rpx !important;
		position: relative;
	}

	.spot.active {
		opacity: 1;
		width: 30rpx;
		background-color: rgb(122, 109, 230);
	}

	/* 间隔线 start*/
	.tn-strip-bottom {
		width: 100%;
		border-bottom: 20rpx solid rgba(241, 241, 241, 0.8);
	}

	.share {
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
		position: absolute;
		top: 50%;
		right: 29rpx;

		#shareBtn {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			opacity: 0;
		}
	}

	.bottom_in {
		color: #ffffff;
		border: 0px solid #353535;
		display: initial;
		margin-left: 0px;
		margin-right: 0px;
		padding-left: 0px;
		padding-right: 0px;
		width: 30px;

	}

	.tantan-slide-box-info {
		padding: 0 32rpx;
		color: #2c2c2c;
	}

	.tantan-slide-box-info .title {
		font-size: 46rpx;
		line-height: 1.2;

	}

	.tantan-slide-box-info .desc {
		font-size: 24rpx;
		line-height: 1.2;
		margin-top: 30rpx;

	}

	.tantan-slide-box-info .tags {
		margin-top: 24rpx;
	}

	.tantan-slide-box-info .tag {
		height: 48rpx;
		font-size: 24rpx;
		padding: 0 16rpx;
		line-height: 48rpx;
		background-color: rgba(255, 255, 255, 0.3);
		border-radius: 10rpx;
	}

	.erge {
		height: 100px;
	}

	.sange {
		height: 200px;
	}
</style>